<template>
    <div class='tomb'>
        <div class='btn_bar'>
           <el-form ref="form" label-width="80px"  :inline="true">
                 <el-form-item label="碑文模板" style='height:30px'>
                    <el-select v-model="bw" placeholder="请选择碑文模板"  style='width:290px;height:30px' @change="changeBw()">
                        <el-option :label="item.label" :value="item.value" v-for="(item,index) in bwData" :key="index" ></el-option>
                      
                    </el-select>
                </el-form-item>
                <el-form-item label="文字">
                    <el-input v-model="form.gt_ex1" style='width:480px;height:30px' @change="oks"></el-input>
                </el-form-item>
                <el-form-item label="方向" style='height:30px'>
                    <el-select v-model="form.gt_ex4" placeholder="请选择方向"  @change="oks" style='width:100px;height:30px'>
                        <el-option label="横向" value="横向"></el-option>
                        <el-option label="纵向" value="纵向"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="字体大小" style='height:30px'>
                    <el-select v-model="form.gt_ex5" placeholder="请选择字体大小"  @change="oks"  style='width:100px;height:30px'>
                        <el-option label="10px" value="10px"></el-option>
                        <el-option label="12px" value="12px"></el-option>
                        <el-option label="14px" value="14px"></el-option>
                        <el-option label="16px" value="16px"></el-option>
                        <el-option label="18px" value="18px"></el-option>
                        <el-option label="20px" value="20px"></el-option>
                        <el-option label="22px" value="22px"></el-option>
                        <el-option label="24px" value="24px"></el-option>
                        <el-option label="26px" value="26px"></el-option>
                        <el-option label="28px" value="28px"></el-option>
                        <el-option label="30px" value="30px"></el-option>
                        <el-option label="32px" value="32px"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="字体样式" style='height:30px'>
                    <el-select v-model="form.gt_ex6" placeholder="请选择字体样式"  @change="oks" style='width:100px;height:30px'>
                        <el-option label="宋体" value="宋体"></el-option>
                        <el-option label="黑体" value="黑体"></el-option>
                        <el-option label="微软雅黑" value="微软雅黑"></el-option>
                        <el-option label="楷体" value="楷体"></el-option>
                        <el-option label="新宋体" value="新宋体"></el-option>
                        <el-option label="仿宋" value="仿宋"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="字体粗细" style='height:30px'>
                    <el-select v-model="form.gt_ex7" placeholder="请选择字体粗细"  @change="oks"  style='width:100px;height:30px'>
                        <el-option label="细" value="lighter"></el-option>
                        <el-option label="正常" value="normal"></el-option>
                        <el-option label="粗" value="bold"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上坐标" style='height:30px'>
                    <el-input v-model="form.gt_ex2"  style='width:100px;height:30px'  @change="oks"></el-input>
                </el-form-item>
                <el-form-item label="左坐标" style='height:30px'>
                    <el-input v-model="form.gt_ex3"  style='width:100px;height:30px'  @change="oks"></el-input>
                </el-form-item>
               
                 <el-button type="primary" @click="addText">新增文本</el-button>
                 <el-button type="primary" @click="delText">删除文本</el-button>
            </el-form>
        </div>
        <div class='tomb_content' @click="clickNoItem()">
            <div @dblclick="openWin(index)" @click.stop="clickItem(index)" v-drag :class="{'drag':true,'isActive':index==curIndex}" v-for="(item,index) in data " :key="index" :style="{'width':item.gt_ex8,'height':item.gt_ex9,'top':item.gt_ex2,'left':item.gt_ex3,'fontSize':item.gt_ex5,'fontFamily':item.gt_ex6,'fontWeight':item.gt_ex7,'textAlign':item.gtt_ex10}">{{item.gt_ex1}}</div>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            style='height:450px'
            append-to-body
            width="60%">
            <div>
                <el-form ref="form" label-width="80px"  :inline="true">
                    <el-form-item label="文字">
                        <el-input v-model="form.gt_ex1" style='width:520px'></el-input>
                    </el-form-item>
                    <el-form-item label="方向" style='height:40px'>
                        <el-select v-model="form.gt_ex4" placeholder="请选择方向" style='width:215px'>
                            <el-option label="横向" value="横向"></el-option>
                            <el-option label="纵向" value="纵向"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字体大小" style='height:40px'>
                        <el-select v-model="form.gt_ex5" placeholder="请选择字体大小"  style='width:215px'>
                            <el-option label="10px" value="10px"></el-option>
                            <el-option label="12px" value="12px"></el-option>
                            <el-option label="14px" value="14px"></el-option>
                            <el-option label="16px" value="16px"></el-option>
                            <el-option label="18px" value="18px"></el-option>
                            <el-option label="20px" value="20px"></el-option>
                            <el-option label="22px" value="22px"></el-option>
                            <el-option label="24px" value="24px"></el-option>
                            <el-option label="26px" value="26px"></el-option>
                            <el-option label="28px" value="28px"></el-option>
                            <el-option label="30px" value="30px"></el-option>
                            <el-option label="32px" value="32px"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字体样式" style='height:40px'>
                        <el-select v-model="form.gt_ex6" placeholder="请选择字体样式"  style='width:215px'>
                            <el-option label="宋体" value="宋体"></el-option>
                            <el-option label="黑体" value="黑体"></el-option>
                            <el-option label="微软雅黑" value="微软雅黑"></el-option>
                            <el-option label="楷体" value="楷体"></el-option>
                            <el-option label="新宋体" value="新宋体"></el-option>
                            <el-option label="仿宋" value="仿宋"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字体粗细" style='height:40px'>
                        <el-select v-model="form.gt_ex7" placeholder="请选择字体粗细"  style='width:215px'>
                            <el-option label="细" value="lighter"></el-option>
                            <el-option label="正常" value="normal"></el-option>
                            <el-option label="粗" value="bold"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上坐标" style='height:40px'>
                        <el-input v-model="form.gt_ex2"  style='width:215px'></el-input>
                    </el-form-item>
                    <el-form-item label="左坐标" style='height:40px'>
                        <el-input v-model="form.gt_ex3"  style='width:215px'></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="oks">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
export default {
    name:"cemeteryTomb",
    props:["datas","dataField"],
    data(){
        return{
            dialogVisible:false,
            curIndex:-1,
            bw:"",
            bwData:[],
            isTx:false,
            form:{
                gt_ex1:"文本1",
                gt_ex2:"0px",
                gt_ex3:"0px",
                gt_ex4:"纵向",
                gt_ex5:"14px",
                gt_ex6:"宋体",
                gt_ex7:"normal",
                gt_ex8:"",
                gt_ex9:"20px",
                gt_ex10:""
            },
            data:[]
            /*data:[{
                top:"10px",
                left:"10px",
                width:"20px",
                height:"",
                fontSize:'18px',
                content:"测试一下军绿色的房间里",
                fontFamily:"宋体",
                fontWeight:"normal",
                textAlign:""
            },{
                top:"100px",
                left:"100px",
                width:"",
                height:"20px",
                fontSize:'16px',
                content:"测试一下军绿色的房间里",
                fontFamily:"宋体",
                fontWeight:"normal",
                textAlign:""
            }]*/
        }
    },
    created(){
        this.data=this.datas[this.dataField];
        this.getBw();
    },
    /*watch:{
        data:{
            handler:function(newVal){
                this.$set(this.datas,this.dataField,this.data)
            },
            deep: true    //深度监听
        }
        
    },*/
    methods:{
        addText(){
            let item=JSON.parse(JSON.stringify(this.form))
            item.gt_ex1="文本1";
            item.gt_ex3="0";
            item.gt_ex2="0";
            item.gt_ex4="纵向";
            item.gt_ex8="20px";
            item.gt_ex9="";
            item.gt_ex5="14px";
            item.gt_ex6="宋体";
            item.gt_ex7="normal";
            item.gt_ex10="center";
            item.gt_ex11=this.datas[this.dataField+"_empty"].gt_ex11;
            this.data.push(item)
            this.curIndex=this.data.length-1;
        },
        delText(){
            if(this.curIndex==-1){
                this.$message.error('请先点击选中，在进行删除');
                return;
            }
             this.$confirm('此操作将永久删除该文本, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.data.splice(this.curIndex)
            }).catch(() => {
                 
            });
            
        },
        openWin(index){
           
            this.dialogVisible=true;
        },
        oks(){
            if(this.form.gt_ex4=="横向"){
                this.form.gt_ex8="";
                this.form.gt_ex9="20px";
                this.form.gt_ex10="";
            }else{
                this.form.gt_ex8="20px";
                this.form.gt_ex9="";
                this.form.gt_ex10="center";
            }
            this.$set(this.data,this.curIndex,JSON.parse(JSON.stringify(this.form)))
            this.dialogVisible=false;
        },
        clickItem(index){
             let item=this.data[index];
            this.curIndex=index;
            console.log(item,"itemsclick==========")
            if(item.width=="20px"||item.gt_ex8=="20px")
                item.gt_ex4="纵向"
            else
                item.gt_ex4="横向"
            this.form=item;

        },
        clickNoItem(){
            this.curIndex=-1;
        },
        getBw(){
            this.$post("cemetery","cemetery/getBw").then(data=>{
                this.bwData=data;
            })
        },
        changeBw(){
            let child=[];
            for(let i=0;i<this.bwData.length;i++){
                let id=this.bwData[i].value;
                if(id==this.bw){
                    child=this.bwData[i].child;
                }
            }
            let gt_ex11=this.datas[this.dataField+"_empty"].gt_ex11;
            for(let i=0;i<child.length;i++){
                child[i].gt_mainid="";
                child[i].gt_ex11=gt_ex11;
            }
            this.$set(this.datas,this.dataField,child);
            this.data=child;
        }
    },
    directives:{
        drag(el,bindings, vnode){
            let sef=vnode.context;
            let odiv = el;   //获取当前元素
            el.onmousedown = function(e){
                //算出鼠标相对元素的位置
                let disX = e.clientX - odiv.offsetLeft;
                let disY = e.clientY - odiv.offsetTop;
                
                document.onmousemove = (e)=>{
                    if(sef.curIndex==-1){
                        if(!sef.isTx)
                            sef.$message.error('请先点击选中，在进行拖拽');
                        sef.isTx=true
                        window.setTimeout(function(){
                            sef.isTx=false;
                        },1500)
                        return;
                    }
                    //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                    let left = e.clientX - disX;    
                    let top = e.clientY - disY;
                    
                    //绑定元素位置到positionX和positionY上面
                    this.positionX = top;
                    this.positionY = left;
            
                    //移动当前元素
                    odiv.style.left = left + 'px';
                    odiv.style.top = top + 'px';
                   // sef.data[sef.curIndex].left=left+"px";
                    //sef.data[sef.curIndex].top=top+"px";
                    sef.$set(sef.data[sef.curIndex],"gt_ex3",left+'px')
                    sef.$set(sef.data[sef.curIndex],"gt_ex2",top+'px')
                };
                document.onmouseup = (e) => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            /*
                var disx = e.pageX - el.offsetLeft;
                var disy = e.pageY - el.offsetTop;
                document.onmousemove = function (e){
                    el.style.left = e.pageX - disx+'px';
                    el.style.top = e.pageY - disx+'px';
                }
                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                }*/
            }
        }
    }
}
</script>
<style scoped>
.tomb{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
}
.tomb_content{
    flex:1;
    position: relative;
    border:1px solid #ddd;
    color:#000;
}
.drag{
    position: absolute;
    
    top: 0;
    left: 0;
    cursor:pointer;
    -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}
.el-form-item{
    margin-bottom:5px;
}
.isActive{
    border:1px solid red;
}
.btn_bar{
    border:1px solid #ddd;
    padding:10px;
    box-sizing: border-box;
}
.btn_bar >>>.el-input__inner{
    height:30px;
    
}
.btn_bar >>>.el-form-item__label{
    height:30px;
    line-height: 30px;
}
.btn_bar >>>.el-form-item__content{
    line-height: 30px;
}
</style>